4.1 CSS box model
- Motivations
- How are all the HTML elements modeled?
Read all in CSS Box Model.
- The box model is very important.
List the four components in the box model.
- Which components are used for the background-color property?
- What properties are used to change the dimension of the content area?
Width, height
- Can you make this table? Padding, and text alignment for all the <th> and <td> cells.
Name | Age |
Jill | Smith | 50 |
Eve | Jackson | 60 |
John | Doe | test |
- Trial 1: Let's try the above example.
Can you give the padding of 20px to all the <td> and <th> elements in the table of id='tr1'?
- Can you change the width and height of any HTML element?
Generally block elements only
- Trial 2: Let's try to change the width and height of <span> or <a>, and <p>, using the inline style.
- Is there no way to change the width of inline-type elements?
There is a way. You can change the display type to 'inline-block', and change the width.
- Trial 3: Let's try to change the width of <span>.
- Learning outcomes
- List and use the four components in the box model.
- Use the display property to change the type.